<template>
   <div class="container">
      <!-- 数据大屏展示内容区域 -->
      <div class="screen" ref="screen">
         <!-- 数据大屏顶部 -->
         <div class="top">
            <Top></Top>
         </div>
         <!-- 数据大屏底部 -->
         <div class="bottom">
            <div class="left">
               <Tourist class="tourist"></Tourist>
               <Sex class="sex"></Sex>
               <Age class="age"></Age>
            </div>
            <div class="center">
               <Map class="map"></Map>
               <LineGragh class="lineGragh"></LineGragh>
            </div>
            <div class="right">
               <Rank class="rank"></Rank>
               <Year class="year"></Year>
               <Count class="count"></Count>
            </div>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
// 引入顶部子组件
import Top from './components/top/index.vue'
// 引入左侧相应的三个子组件
import Tourist from './components/tourist/index.vue'
import Sex from './components/sex/index.vue'
import Age from './components/age/index.vue'
// 引入中间相应的两个子组件
import Map from './components/map/index.vue'
import LineGragh from './components/lineGragh/index.vue'
// 引入右侧相应的三个子组件
import Rank from './components/rank/index.vue'
import Year from './components/year/index.vue'
import Count from './components/count/index.vue'
// 获取数据大屏展示内容盒子的DOM元素
let screen = ref()
onMounted(() => {
   screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})
// 定义大屏缩放的比例
const getScale = (w = 1920, h = 1080) => {
   const ww = window.innerWidth / w
   const wh = window.innerHeight / h
   return ww < wh ? ww : wh
}
// 监听视口变化
window.onresize = () => {
   screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>

<style lang="scss" scoped>
.container {
   width: 100vw;
   height: 100vh;
   background: url(./images/bg.png) no-repeat;
   background-size: cover;

   .screen {
      width: 1920px;
      height: 1080px;
      position: fixed;
      left: 50%;
      top: 50%;
      transform-origin: left top;

      .top {
         width: 100%;
         height: 40px;
      }

      .bottom {
         display: flex;

         .left {
            flex: 1;
            height: 1040px;
            display: flex;
            flex-direction: column;
            margin-left: 10px;

            .tourist {
               flex: 1.2;
               margin: 10px 0;
            }

            .sex {
               flex: 1;
               margin: 10px 0;
            }

            .age {
               flex: 1;
               margin: 10px 0 20px 0;
            }

         }

         .center {
            flex: 2;
            display: flex;
            flex-direction: column;

            .map {
               flex: 3;
            }

            .lineGragh {
               flex: 1;
            }
         }

         .right {
            flex: 1;
            height: 1040px;
            display: flex;
            flex-direction: column;
            margin-right: 10px;

            .rank {
               flex: 1.2;
               margin-top: 10px;
            }

            .year {
               flex: 1;
               margin-top: 20px;
            }

            .count {
               flex: 1;
               margin: 20px 0;
            }
         }
      }
   }
}
</style>